<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登陆</title>
		<link rel="stylesheet" href="css/footer.css" />
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" type="text/css" href="css/zhuce.css" />
		<link rel="stylesheet" type="text/css" href="css/nav.css" />
		<link rel="SHORTCUT ICON" href="funnyfacefruit.ico" />
		<style type="text/css">
			.nl_loginitem2 {
				width: 320px;
				height: 44px;
				margin: 14px 0px;
				background-color: #FFFFFF;
				border: 1px solid #DDDDDD;
				border-radius: 5px;
			}
			
			.nl_loginitem2 input {
				width: 100%;
				padding: 11px;
				border: none;
				border-radius: 5px;
				font-size: 14px;
			}
			
			#forms {
				width: 320px;
				margin: 0px auto;
			}
			
			.nl_loginitem3 {
				width: 320px;
				height: 44px;
				margin: 14px 0px;
			}
			
			.nl_loginitem3 input {
				width: 86px;
				height: 42px;
				background-color: #EC5541;
				border: none;
				border-radius: 5px;
				font-size: 16px;
				color: #FFFFFF;
				cursor: pointer;
			}
			
			.nl_loginitem3 input:hover {
				background-color: #B23B2C;
			}
			
			.nl_loginitem1 {
				font-size: 14px;
			}
			
			.nl_loginitem1 label {
				float: left;
			}
			
			.nl_loginitem1 a {
				float: right;
			}
			
			.nl_loginitem1 a:hover {
				color: #EC5541;
				text-decoration: underline;
			}
		</style>
		<script type="text/javascript" src="lib/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				var footer_right = document.getElementById("footer_right_div1");
				var divs = footer_right.getElementsByTagName("div");
				for(var i = 0; i < divs.length; i++) {
					var x = 105 * (i + 1) + "px";
					var y = 105 + "px";
					divs[i].style.backgroundPosition = x + " " + y;
				}
				var a = document.getElementById("display_aa1");
			}

			function xianshi(t) {
				t.children[1].style.display = "block";
			}

			function xiaoshi(t) {
				t.children[1].style.display = "none";
			}
			$(function() {
				$("#display_aa1").click(function() {
					if(this.innerHTML == "收起 ^") {
						this.innerHTML = "更多第三方登录方式 V";
					} else {
						this.innerHTML = "收起 ^";
					}
					$("#display_a2").slideToggle(400);
				})
			});
		</script>

	</head>

	<body>
		<header>
			<div id="headerlog"></div>
			<div id="main_search">
				<p>
					<input type="text" placeholder="请输入菜谱/食材/菜单/作者" class="search" />
					<input type="button" value="搜索" class="searchbutton" />
				</p>
			</div>
			<div id="logitem">
				<ul>
					<li id="li1">
						<a href="#">QQ登录</a>
					</li>
					<li id="li2">
						<a href="#">微博登录</a>
					</li>
					<li class="li3">
						<a href="zhuce.html">注册</a>
					</li>
					<li class="li3">
						<a href="#">登录</a>
					</li>
				</ul>
			</div>
		</header>
		<nav>
			<ul id="caipudaquan">
				<li class="l1">
					<a href="index.html">首页</a>
				</li>
				<li class="l2" onmouseover="xianshi(this)" onmouseout="xiaoshi(this)">
					<a href="caipudaquan.html">菜谱大全</a>
					<div id="caipu">
						<div class="p1">
							<span><a href="#">家常菜谱</a></span>
							<ul>
								<li>
									<a href="#">家常菜</a>
								</li>
								<li>
									<a href="#">凉菜</a>
								</li>
								<li>
									<a href="#">素菜</a>
								</li>
								<li>
									<a href="#">晚餐</a>
								</li>
								<li>
									<a href="#">私家菜</a>
								</li>
								<li>
									<a href="#">热菜</a>
								</li>
								<li>
									<a href="#">海鲜</a>
								</li>
								<li>
									<a href="#">孕妇</a>
								</li>
								<li>
									<a href="#">早餐</a>
								</li>
								<li>
									<a href="#">午餐</a>
								</li>
								<li>
									<a href="#">甜品点心</a>
								</li>
								<li>
									<a href="#">汤粥</a>
								</li>
								<li>
									<a href="#">宝宝食谱-婴儿食谱</a>
								</li>
								<li>
									<a href="#">糕点主食</a>
								</li>
								<li>
									<a href="#">微波炉</a>
								</li>
							</ul>
						</div>
						<div class="p2">
							<span><a href="#">中华菜系</a></span>
							<ul>
								<li>
									<a href="#">家常菜</a>
								</li>
								<li>
									<a href="#">凉菜</a>
								</li>
								<li>
									<a href="#">素菜</a>
								</li>
								<li>
									<a href="#">晚餐</a>
								</li>
								<li>
									<a href="#">私家菜</a>
								</li>
								<li>
									<a href="#">热菜</a>
								</li>
								<li>
									<a href="#">海鲜</a>
								</li>
								<li>
									<a href="#">孕妇</a>
								</li>
							</ul>
						</div>
						<div class="p2">
							<span><a href="#">各地小吃</a></span>
							<ul>
								<li>
									<a href="#">四川小吃</a>
								</li>
								<li>
									<a href="#">广东小吃</a>
								</li>
								<li>
									<a href="#">北京小吃</a>
								</li>
								<li>
									<a href="#">陕西小吃</a>
								</li>
							</ul>
						</div>
						<div class="p2">
							<span><a href="#">外国菜谱</a></span>
							<ul>
								<li>
									<a href="#">韩国料理</a>
								</li>
								<li>
									<a href="#">日本料理</a>
								</li>
								<li>
									<a href="#">法国菜</a>
								</li>
								<li>
									<a href="#">意大利餐</a>
								</li>
							</ul>
						</div>
						<div class="p2">
							<span><a href="#">烘焙</a></span>
							<ul>
								<li>
									<a href="#">糕面包蛋</a>
								</li>
								<li>
									<a href="#">饼干配方</a>
								</li>
								<li>
									<a href="#">甜品点心</a>
								</li>
							</ul>
						</div>
						<div class="p2">
							<span><a href="#">厨房百科</a></span>
							<ul>
								<li>
									<a href="#">摆盘周边</a>
								</li>
								<li>
									<a href="#">烹饪技巧</a>
								</li>
								<li>
									<a href="#">生活妙招</a>
								</li>
								<li>
									<a href="#">美食专题</a>
								</li>
							</ul>
						</div>
						<div class="p2">
							<span><a href="#">食材百科</a></span>
							<ul>
								<li>
									<a href="#">蔬菜</a>
								</li>
								<li>
									<a href="#">水果</a>
								</li>
								<li>
									<a href="#">谷类</a>
								</li>
							</ul>
						</div>
						<img src="img/jccp_navbgg.png" />
					</div>
				</li>
				<li class="l3" onmouseover="xianshi(this)" onmouseout="xiaoshi(this)">
					<a href="yinshijiankang.html">饮食健康</a>
					<div id="health">
						<div class="p1">
							<span><a href="#">饮食健康</a></span>
							<ul>
								<li>
									<a href="#">饮食小常识</a>
								</li>
								<li>
									<a href="#">美容瘦身</a>
								</li>
								<li>
									<a href="#">食品安全</a>
								</li>
								<li>
									<a href="#">养生妙方</a>
								</li>
								<li>
									<a href="#">饮食禁忌</a>
								</li>
								<li>
									<a href="#">中医保健</a>
								</li>
								<li>
									<a href="#">母婴健康饮食</a>
								</li>
								<li>
									<a href="#">饮食新闻</a>
								</li>
							</ul>
						</div>
						<div class="p1">
							<span><a href="#">功能性调理</a></span>
							<ul>
								<li>
									<a href="#">清热去火</a>
								</li>
								<li>
									<a href="#">减肥</a>
								</li>
								<li>
									<a href="#">祛痰</a>
								</li>
								<li>
									<a href="#">乌发</a>
								</li>
								<li>
									<a href="#">滋阴补肾</a>
								</li>
								<li>
									<a href="#">健脾开胃</a>
								</li>
								<li>
									<a href="#">消化不良</a>
								</li>
								<li>
									<a href="#">清热解毒</a>
								</li>
								<li>
									<a href="#">补阴壮阳</a>
								</li>
								<li>
									<a href="#">增肥</a>
								</li>
							</ul>
						</div>
						<div class="p2">
							<span><a href="#">人群食膳</a></span>
							<ul>
								<li>
									<a href="#">孕妇</a>
								</li>
								<li>
									<a href="#">老人</a>
								</li>
								<li>
									<a href="#">产妇</a>
								</li>
								<li>
									<a href="#">哺乳期</a>
								</li>
								<li>
									<a href="#">青少年</a>
								</li>
								<li>
									<a href="#">幼儿</a>
								</li>
								<li>
									<a href="#">学龄期儿童</a>
								</li>
							</ul>
						</div>
						<div class="p2">
							<span><a href="#">疾病调理</a></span>
							<ul>
								<li>
									<a href="#">糖尿病</a>
								</li>
								<li>
									<a href="#">高血压</a>
								</li>
								<li>
									<a href="#">痛风</a>
								</li>
								<li>
									<a href="#">胃炎</a>
								</li>
								<li>
									<a href="#">痔疮</a>
								</li>
								<li>
									<a href="#">更年期</a>
								</li>
								<li>
									<a href="#">甲状腺</a>
								</li>
							</ul>
						</div>
						<div class="p2">
							<span><a href="#">脏腑调理</a></span>
							<ul>
								<li>
									<a href="#">感冒</a>
								</li>
								<li>
									<a href="#">补肾</a>
								</li>
								<li>
									<a href="#">阳痿早泄</a>
								</li>
								<li>
									<a href="#">补血</a>
								</li>
								<li>
									<a href="#">便秘</a>
								</li>
								<li>
									<a href="#">腹泻</a>
								</li>
								<li>
									<a href="#">活血化瘀</a>
								</li>
							</ul>
						</div>
						<img src="img/ysjk_navbg.png" />
					</div>
				</li>
				<li class="l4">
					<a href="meishicaidan.html">美食菜单</a>
				</li>
				<li class="l5">
					<a href="jiajuguan.html">家居馆</a>
				</li>
				<li class="l6">
					<a href="#">美食达人</a>
				</li>
				<li class="l7">
					<a href="#">讨论组</a>
				</li>
				<li class="l8">
					<a href="#">手机版下载</a>
				</li>
			</ul>
		</nav>
		<div id="main">
			<div id="main_neiron">
				<h3 class="main_h3">
					<img src="img/nl_title_left.png" />
					<span>登陆美食杰</span>
					<img src="img/nl_title_right.png" />
				</h3>
				<div class="icon">
					<div class="icon_img img1"></div>
					<div class="icon_img img2"></div>
					<div class="icon_img img3"></div>
				</div>
				<div class="display_a">
					<a id="display_aa1">更多第三方登录方式 V</a>
				</div>
				<div id="display_a2">
					<a href="#">人人网账号登陆</a>
					<a href="#">百度账号登陆</a>
					<a href="#">开心网账号登陆</a>
					<a href="#">盛大通行证登陆</a>
				</div>
				<div class="nl_or"><img src="img/nl_or.png" /></div>
				<div class="denglu">
					<div id="forms">
						<form method="get">
							<div class="nl_loginitem2">
								<input class="text" value="" name="username" placeholder="请输入手机号/邮箱/昵称" type="text">
							</div>
							<div class="nl_loginitem2">
								<input class="password" name="password" placeholder="请输入密码" type="password">
							</div>
							<div class="nl_loginitem1" style="height:33px;">
								<label><input id="auto_login_next" value="auto" class="checkbox" type="checkbox"> 下次自动登录</label>
								<a class="forgetpassword">忘记密码？</a>
							</div>
							<div class="nl_loginitem3" style="text-align:center;">
								<input class="submit" value="登录" type="submit" style="width: 86px;">
							</div>
						</form>
					</div>
				</div>
				<div class="display_a">
					<a href="zhuce.html">还没有账号？免费注册 V</a>
				</div>
			</div>
		</div>

		<footer>
			<div class="footer_border">
				<div class="footer_left">
					<img src="img/jiankang/logo_f.png" />
					<p> 中国，最大的菜谱库 <span>800,000 篇</span> </p>
					<p> 每月，用户访问数量 <span>20,000,000 次</span> </p>
					<p> 每年，菜谱被浏览量 <span>36,000,000,000 次</span> </p>
					<p> 现在，这些数字还在不断的增长着，欢迎您来一起使用美食杰</span>
					</p>
				</div>
				<div id="footer_right">
					<div id="footer_right_div1">
						<div></div>
						<div></div>
						<div></div>
						<div></div>
					</div>
					<div id="footer_right_div2">
						<div>
							<a href="#">扫描二维码下载
								<br />美食杰手机客户端
							</a>

						</div>
						<div>
							<a href="#">扫描二维码添加<br />美食杰为微信好友
							</a>
						</div>
						<div>
							<a href="#">点击进入<br /> 美食杰QQ空间
							</a>
						</div>
						<div>
							<a href="#">点击进入<br /> 美食杰官方微博
							</a>
						</div>
					</div>
					<span id="footer_sp1">关注：81万</span>
					<span id="footer_sp2">关注：10.3万</span>
				</div>
			</div>
			<div id="footer_bottom">
				<div>
					<a href="#">公司简介</a>
					<a href="#">企业文化</a>
					<a href="#">公司动态</a>
					<a href="#">免责申明</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">商务合作</a>
					<a href="#">网站地图</a>
					<a href="#">友情链接</a>
					<a href="#">美食杰移动APP</a>
				</div>
				<p>京ICP证150335号/京公网安备11010802009977 Copyright © 2003-2016 MEISHIJ CO.,LTD.</p>

			</div>
		</footer>

	</body>

</html>